<template>
  <a-card title="动态配置管理" class="dynamic-config-card">
    <a-row :gutter="16">
      <a-col :span="4">
        <a-input v-model="searchForm.configKey" placeholder="请输入字典标识" allowClear />
      </a-col>
      <a-col :span="4">
        <a-space>
          <a-button icon="search" type="primary" @click="handleSearch"> 搜索 </a-button>
          <a-button @click="handleReset"> 重置 </a-button>
        </a-space>
      </a-col>
      <a-col :span="16" style="text-align: right" v-if="$hasPermission('add')">
        <a-button icon="plus" type="primary" @click="handleAdd">新增</a-button>
      </a-col>
    </a-row>
    <a-modal
      :title="isEdit ? '编辑动态配置' : '新增动态配置'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="visible = false"
      width="800px"
    >
      <AddAndEditForm ref="addAndEditForm" :isEdit="isEdit" />
    </a-modal>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :alert="false"
      showPagination="auto"
      class="dynamic-config-table"
    >
      <template slot="configValue" slot-scope="text">
        <JSONView title="字典详情" :text="text" />
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-button type="link" @click="handleEdit(record)" v-if="$hasPermission('modify')">编辑</a-button>
        <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record)">
          <template slot="title"> 确定删除此数据？ </template>
          <a-button type="link" v-if="$hasPermission('delete')">删除</a-button>
        </a-popconfirm>
      </template>
    </s-table>
  </a-card>
</template>

<script>
import { STable, JSONView } from '@/components'
import AddAndEditForm from './AddAndEditForm.vue'
import { getDynamicConfigList, deleteDynamicConfig } from '@/api/dynamicConfig'

export default {
  name: 'DynamicConfig',
  components: {
    STable,
    AddAndEditForm,
    JSONView,
  },
  beforeRouteEnter(to, from, next) {
    if (from.path === '/403') {
      window.location.reload()
      return
    }
    next((vm) => {
      if (!vm.$hasPermission('query')) {
        vm.$router.push({ path: '/403' })
      }
    })
  },
  data() {
    return {
      searchForm: {},
      columns: [
        {
          title: '字典标识',
          dataIndex: 'configKey',
        },
        {
          title: '字典详情',
          dataIndex: 'configValue',
          ellipsis: true,
          scopedSlots: { customRender: 'configValue' },
        },
        {
          title: '描述',
          dataIndex: 'description',
          customRender: (text) => {
            return text || '--'
          },
        },
        {
          title: '修改人',
          dataIndex: 'modifyBy',
          customRender: (text) => {
            return text || '--'
          },
        },
        {
          title: '修改时间',
          dataIndex: 'gmtModify',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      isEdit: false,
      visible: false,
      confirmLoading: false,
    }
  },
  methods: {
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    loadData(parameter) {
      const requestParameters = Object.assign(
        {},
        {
          curPage: parameter.pageNo,
          pageSize: parameter.pageSize,
        },
        this.searchForm
      )

      console.log('loadData request parameters:', requestParameters)
      return getDynamicConfigList(requestParameters).then((res) => {
        const { contents } = res.data
        if (contents) {
          res.data.data = contents
          delete res.data.contents
        }
        return res.data
      })
    },
    handleReset() {
      this.searchForm = {}
      this.$refs.table.refresh(true)
    },
    handleAdd() {
      this.visible = true
      this.isEdit = false
      this.$nextTick(() => {
        this.$refs.addAndEditForm.initializeDefaultValues()
      })
    },
    handleOk() {
      this.confirmLoading = true
      this.$refs.addAndEditForm
        .submitForm()
        .then((res) => {
          this.confirmLoading = false
          if (res) {
            this.visible = false
            this.$refs.table.refresh(true)
          }
        })
        .catch(() => {
          this.confirmLoading = false
        })
    },
    handleEdit(record) {
      this.visible = true
      this.isEdit = true
      this.$nextTick(() => {
        this.$refs.addAndEditForm.initializeDefaultValues(record)
      })
    },
    handleDelete(record) {
      deleteDynamicConfig({ id: record.id }).then((res) => {
        if (res.statusCode === 200) {
          this.$message.success('删除成功')
          this.$refs.table.refresh(true)
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.dynamic-config-card {
  .dynamic-config-table {
    margin-top: 16px;
  }
}
</style>
